<template>
	<view style="background-color: #f7f7f7;" v-if="checkImg">
		<view class="top">
			<view class="back-btn" @click="backPage()">
				<view class="back-icon"></view>
			</view>
			<view style="text-align: center; font-size: 35rpx; color: #fff;">扫码核销</view>
			<view class="card">
				<image src="/static/checkCode1.png" style="display: block; margin: 50rpx auto;" @click="checkImg=false"></image>
			</view>
		</view>	
	</view>	
	<view style="height: 100%; background-color: #f7f7f7;" v-if="!checkImg">
		<view class="top">
			<view style="text-align: center; font-size: 35rpx; color: #fff;">核销操作</view>
			<view class="card">
				<view class="check_code">核销码MC1234-5678-9012</view>
				<view class="line"></view>
				<view class="big_title">服务内容</view>
				<view class="small_title">xxx标准洗车服务包含</view>
				<view class="small_title">整车泡沫冲洗擦T</view>
				<view class="small_title">轮胎轮毂冲洗清洁</view>
				<view class="small_title">车内吸尘</view>
				<view class="small_title">内饰脚垫简单除尘</view>
				<view class="small_title">（不包含虫尸、水泥、沥青和顽固物质清理等）</view>
				<view class="line"></view>
				<view class="big_title">订单信息</view>
				<view class="small_title">订单价格：￥30.00</view>
				<view class="small_title">实付金额：<span style="font-weight: 500;">￥25.00</span></view>
				<view class="small_title">优惠金额：￥5.00</view>
				<view class="small_title">订单编号 202003255456799</view>
				<view class="small_title">支付时间 2020.03.30 14：40：45</view>
				<view class="small_title">预约时间 2020.03.30 14：40：00</view>
			</view>
		</view>	
		<view style="height: 750rpx;"></view>
		<button v-if="!checkConfirm" @click="confirmCheck()" style="margin: 50rpx 100rpx; border-radius: 25px; background-color: #4c8efe; color: white;">确认核销</button>
		<button v-if="checkConfirm" @click="toIndex()" style="margin: 50rpx 100rpx; border-radius: 25px; background-color: #808080; color: white;">已核销</button>
	</view>	
</template>

<script setup>
import { ref } from 'vue';

	
const checkImg = ref(true);
const checkConfirm =ref(false);



	function backPage(){
		uni.navigateBack()
	}


	function confirmCheck(){
		uni.showModal({
			title: '核销此订单', // 弹框标题
			content: '请您仔细核对此订单，此操作不可撤销，请谨慎操作！', // 弹框内容
			confirmText: '确认', // 确认按钮文本
			cancelText: '取消', // 取消按钮文本
			success: (res) => {
			  if (res.confirm) {
				// 用户点击了确定按钮
				console.log('用户点击了确定');
				checkConfirm.value = true;
			  } else if (res.cancel) {
				// 用户点击了取消按钮
				console.log('用户点击了取消');
				checkConfirm.value = false;
			  }
			}
		  });
	}
	function toIndex(){
		uni.redirectTo({
			url:'/pages/index/index'
		})
	}


	
</script>

<style>
@import "@/common/app.css";
.card{border-radius: 20px; background-color: #fff; margin: 30rpx; padding: 30rpx 20rpx;}
.check_code{ font-weight: 600; text-align: center; }
.line{ width: 100%; height: 1px; background-color: gray; margin: 20rpx 10rpx; }
.big_title{margin: 20rpx; font-weight: 600;}	
.small_title{ margin: 20rpx; }
.back-btn{ margin-left: 20rpx; width: 50rpx; height: 50rpx; position: relative;}	
.back-icon { width: 30px; height: 30px;}	
.back-icon::before { content: ""; position: absolute; width: 20px; height: 2px; background-color: #fff; top: 80rpx; left: 47rpx; transform: translate(-50%, -50%); }
.back-icon::after { content: ""; position: absolute; width: 10px; height: 10px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); top: 70rpx; left: 30rpx;}	       
		   
</style>
